<template>
  <div id="msgBoard">
		<div>
			<p class="sendWord">主人寄語 <span class="backImg"></span></p>
			<p><span class="word">天上的神明與星辰，人間的藝術與純真，我們敬畏和追求的莫過於此。</span></p>
		</div>
		<div class="text">
			<mu-text-field v-model="message" hintTextClass="helpText" hintText="请输入您的留言" underlineFocusClass="line" fullWidth multiLine :rows="3" :rowsMax="6"/>			
			<mu-text-field v-model="name" hintTextClass="helpText" hintText="请输入您的呢称" underlineFocusClass="line" fullWidth inputClass="name" v-show="!anonymity" />
		</div>
		<div class="handle">
			<div><mu-raised-button @click="submit" label="发表" secondary/></div>
			<div><mu-switch label="匿名" v-model="anonymity"/></div>
		</div>
		<div class="msgModule">
			<p class="text">留言列表</p>
			<ul>
				<li class="item" v-for="(item,index) in msgList">
					<div class="main">
						<p class="floor">
							<span>第{{index+1}}楼</span>
							<span v-if="token" @click="del(item.id)" class="delete">删除</span>
						</p>					
						<p class="content">
							<span>{{item.message}}</span>
						</p>					
						<p class="time">
							<span>{{item.time|time}}</span>
							<span>{{item.name}}</span>
						</p>					
					</div>					
				</li>
				<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
					<p class="moreTip">{{loadingMsg}}</p>
				</div>
			</ul>
		</div>
  </div>
</template>

<script>
	import main from './main';
	export default {
		...main
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss">
	@import '../../style/mixin.scss';
	@import "./style.scss";
</style>
